<template>
  <div class="page">
    <Header title="出行人管理" :back="true" />
    <div class="content">
      <template v-if="!loading">
        <div class="list" v-for="item in list" :key="item.id">
          <van-swipe-cell>
            <div class="swipe_cell_box">
              <div class="left">
                <img class="icon" src="../../assets/images/icons/contact.png" alt="" />
                <div class="box">
                  <div class="name">
                    {{ item.name }}
                  </div>
                  <div class="card_id">
                    {{ maskIdNumber(item.idCard) }}
                  </div>
                </div>
              </div>
              <img @click="onEdit(item)" class="icon1" src="../../assets/images/icons/EditOutlined.png" alt="" />
            </div>
            <template #right>
              <van-button square text="删除" @click="handeldelid(item)" type="danger" class="delete_button" />
            </template>
          </van-swipe-cell>
        </div>
      </template>
      <van-skeleton v-else>
        <template #template>
          <div :style="{ width: '100%' }">
            <template v-for="i in 6" :key="i">
              <div :style="{ marginTop: '3rem' }">
                <van-skeleton-paragraph row-width="20%" />
                <van-skeleton-paragraph />
              </div>
            </template>
          </div>
        </template>
      </van-skeleton>

    </div>
    <div class="bottom_button" @click="handeladdperson">
      <div class="button_add">添加出行人</div>
    </div>
  </div>
</template>
<script setup>
import {  ref } from 'vue';
import { useRouter } from "vue-router"
import { maskIdNumber } from '@/utils/index.js'
import api from '@/api/index.js'

const router = useRouter()

const list = ref([])

const handeladdperson = () => (
  router.push({ path: '/addapedestrian' })
)
function onEdit(item) {
  router.push({ path: '/pedestrianedit', query: { id: item.id } })
}
// 删除出行人信息
function handeldelid(item) {
  const params = {
    id: item.id
  }
  api.delidapedestrian(params).then(() => {
    getapedestrianlist()
  }).finally(() => {
  })
}

const loading = ref(false)
// 获取出行人列表
function getapedestrianlist() {
  loading.value = true
  api.getapedestrian().then((res) => {
    list.value = res.data
  }).finally(() => {
    loading.value = false
  })
}
getapedestrianlist()



</script>
<style lang="scss" scoped>
:deep(.van-skeleton-paragraph) {
  //background-color: #e6dcdc;
}
:deep(.van-button:before) {
  width: 0;
}
.page{
  height: 100%;
  display: flex;
  flex-direction: column;
  .content{
    flex: 1;
    overflow-y: auto;
    background: #F9F8F3;
    .list{
      background: #FFFFFC;
      border-radius: .5rem;
      opacity: 1;
      margin: 1.5rem;
      box-shadow: 0 0.7rem 1.5rem 0 rgba(54, 141, 88, 0.05);
      .swipe_cell_box{
        padding: 1.5rem 1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          display: flex;
          align-items: center;
          .icon{
            width: 3rem;
            height: 3rem;
          }
          .box{
            margin-left: 1rem;
            display: flex;
            flex-direction: column;
            .name{
              font-size: 1.6rem;
              font-weight: bold;
              color: #333333;
              margin-bottom: .6rem;
            }
            .card_id{
              font-size: 1.4rem;
              color: #999999;
            }
          }
        }
        .icon1{
          width: 1.6rem;
          height: 1.6rem;
        }
      }
      .delete_button{
        height: 100%;
      }
    }
  }
  .bottom_button{
    height: 7rem;
    padding: 0 1.5rem;
    background: #F9F8F3;
    .button_add{
      margin-top: 1rem;
      height: 5rem;
      line-height: 5rem;
      text-align: center;
      background: var(--van-primary-color);
      border-radius: .5rem;
      font-size: 1.6rem;
      font-weight: normal;
      color: #FFFFFF;
    }
    .button_add:active{
      background: var(--van-primary-button-active-color);
    }
  }
}

</style>
